import React, { useEffect, useState } from "react";
import { enquireScreen } from "enquire-js";
import "./styles/index.less";

import Banner0 from "./components/Banner0";
import Content6 from "./components/Content6";
import Content7 from "./components/Content7";
import Content8 from "./components/Content8";
import Content5 from "./components/Content5";

import {
  Banner00DataSource,
  Content60DataSource,
  Content70DataSource,
  Content80DataSource,
} from "@/util/data.source";

const Home = ({}) => {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    // 适配手机屏幕;
    enquireScreen((b) => {
      setIsMobile(!!b);
    });
  },[])

  const apply = () => {
    const anchorName = "Footer0_1";
    // 找到锚点
    let anchorElement = document.getElementById(anchorName);
    // 如果对应id的锚点存在，就跳转到锚点
    if (anchorElement) {
      anchorElement.scrollIntoView({ block: "start", behavior: "smooth" });
    }
  };

  return (
    <div className="templates-wrapper">
      <Banner0
        dataSource={Banner00DataSource}
        isMobile={isMobile}
      />
      <div 
        id="Content1" 
        className="content4-wrapper"
      >
        <p>
        我们的愿景是“打造全球顶尖的独立第三方数据湖”；我们的使命是“让每个用户的数字化更简单、更安全、更高效，为全球数字经济和人类美好生活贡献力量”
        </p>
      </div>
      <Content5
        isMobile={isMobile}
      />
      <Content6
        dataSource={Content60DataSource}
        isMobile={isMobile}
      />
      <Content7
        dataSource={Content70DataSource}
        isMobile={isMobile}
      />
      {/* <Content8
        dataSource={Content80DataSource}
        isMobile={isMobile}
      /> */}
    </div>
  )
}

export default Home;